<template>
  <div class="hello">
    <h1 v-html="msg"></h1>
    <button v-on:click="listenFromFather" >listenFromFather</button>
    <button v-on:click="tellToFather" >tellToFather</button>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Hello,I am componentA'
    }
  },
  props: ['msgFromFather'],
  methods: {
    listenFromFather: function () {
      alert(this.msgFromFather)
    },
    tellToFather: function () {
      this.$emit('tell-to-father', this.msg)
    }
  }
}
</script>

<style scoped>

.showLine {
  text-decoration:underline
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
